<script  >

import WebFooter from "../components/WebFooter.vue";
import WebHeader from "../components/WebHeader.vue";

export default {
    name: 'Index',
    components: {
        WebFooter,
        WebHeader
    },
    computed:{
        footerStatus(){
            return this.$store.state.showFooter
        },
        headerStatus(){
            return this.$store.state.showHeader
        }
    },
    mounted(){

    }
}
</script>

<template>
    <div class="flex column" style="min-height: 100vh;width: 100%" >
        <!--     头部-->
            <div class="header"  style="height: 60px">
                <WebHeader class="header" style="position: fixed;height: 60px;background: white;z-index: 999"/>
            </div>
        <!--        中间内容-->
        <div class="main flex align-center center " style="width: 100%"  >
            <router-view/>
        </div>
        <!--        尾部-->
        <div v-if="footerStatus"  class="footer">
            <WebFooter />
        </div>
    </div>
</template>

<style scoped>
.header{
    padding: 0;
    background: #FFFFFF;
    box-shadow: 1px 4px 12px 1px rgba(105, 105, 105, 0.10);

}
.footer{
    height: 120px!important;
    padding: 0;
    background: #FFFFFF;
    box-shadow: 1px 4px 12px 8px rgba(105, 105, 105, 0.10);
}
.main{
    width: 100%;
    min-height: calc(100% - 180px);
    height: calc(100% - 180px);
    background: #CCCCCC20;
    padding: 0!important;
}
</style>
